<!--机位使用情况-->
<div class="gpu">

    <el-row class="consume-panel" style="margin-bottom: 0px">
        <el-col :span="4">
            <span class= "gpu-font-base">航班：</span>
            <span style="font-size: 24px;color: #f6f804">66</span>
            <span style="font-size: 10px;color: #f6f804">架次</span>
        </el-col>
        <el-col :span="4">
            <span class= "gpu-font-base">进港：</span>
            <span style="font-size: 24px;color: #f6f804">32</span>
            <span style="font-size: 10px;color: #f6f804">架次</span>
        </el-col>
        <el-col :span="4">
            <span class= "gpu-font-base">出港：</span>
            <span style="font-size: 24px;color: #f6f804">34</span>
            <span style="font-size: 10px;color: #f6f804">架次</span>
        </el-col>
        <el-col :span="6">
            <span class= "gpu-font-base">进港频次：</span>
            <span style="font-size: 24px;color: #f6f804">15</span>
            <span style="font-size: 10px;color: #f6f804">min/架次</span>
        </el-col>
        <el-col :span="6">
            <span class= "gpu-font-base">出港频次：</span>
            <span style="font-size: 24px;color: #f6f804">15</span>
            <span style="font-size: 10px;color: #f6f804">min/架次</span>
        </el-col>
    </el-row>
    <el-row>
        <!--机位分布-->
        <el-col :span="12" style="height: 605px">
            <div  class="consume-panel">

                <div style="text-align: center;font-size:14px;color: #00FFFF;margin: 15px;padding-bottom: 10px">机位利用率热力图</div>

        <el-row>
            <!--<el-col :span="11">-->
                <!--<el-row class="gpStyle" v-for="i in 7" :style="gatePuStyle(i-1)">-->
                    <!--<span>{{gatePuRatioData[i-1].gatePosition}}</span>-->
                <!--</el-row>-->
            <!--</el-col>-->
            <!--<el-col :span="2" style="height: 1px">-->
            <!--</el-col>-->
            <!--<el-col :span="11">-->
                <!--<el-row class="gpStyle" v-for="j in 7" :style="gatePuStyle(j+6)">-->
                    <!--<span>{{gatePuRatioData[j+6].gatePosition}}</span>-->
                <!--</el-row>-->
            <!--</el-col>-->
            <div style="width: 100%;height: 425px">
                <el-row style="height: 100%;">
                <el-col :span="12" style="height: 100%" class="side">
                    <el-row style="height: 25%;" type="flex" justify="center" v-for="i in 4" >
                        <el-col :span="8"  :class="' flat'" :style="gatePuStyle((i-1)*2)">

                           <span>{{gatePuRatioData[(i-1)*2].gatePosition}}</span>
                        </el-col>
                        <el-col :span="8"  :class="' flat'" :style="gatePuStyle(i*2-1)">

                           <span>{{gatePuRatioData[(i-1)*2+1].gatePosition}}</span>
                        </el-col>
                    </el-row>

                </el-col>
                <el-col :span="12" style="height: 100%">
                    <el-row style="height: 25%;" type="flex" justify="center" v-for="i in 4" >
                        <el-col :span="8"  :class="' flat'" :style="gatePuStyle((i-1)*2+8)">

                            <span>{{gatePuRatioData[(i-1)*2+8].gatePosition}}</span>
                        </el-col>
                        <el-col :span="8"  :class="' flat'" :style="gatePuStyle((i-1)*2+9)">

                            <span>{{gatePuRatioData[(i-1)*2+9].gatePosition}}</span>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            </div>
        </el-row>
            <el-row class="status" style="margin-top: 30px;margin-bottom: 12px">
                    <el-col :span="5" class="text" style=" color: #f36b95;font-size: 12px">高</el-col>
                    <el-col :span="3" class="color" style="background-color: #f36b95;"></el-col>
                    <el-col :span="5" class="text" style=" color: #e6e854;font-size: 12px">中</el-col>
                    <el-col :span="3" class="color" style="background-color: #e6e854;"></el-col>
                    <el-col :span="5" class="text" style=" color: #4fbdc7;font-size: 12px">低</el-col>
                    <el-col :span="3" class="color" style="background-color: #4fbdc7;"></el-col>
            </el-row>
            </div>
        </el-col>


        <!--机位占用情况-->
        <el-col :span="12" >
            <el-row  class="consume-panel" >
                <div id="gatePu" :style="{width: '100%', height: '300px'}"></div>
            </el-row>
            <el-row class="consume-panel" style="padding: 8px">
                <el-table
                        :data="gatePuRatioData"
                        height="214"
                        style="width: 100%;">
                    <el-table-column label="机位利用率详情">
                        <el-table-column
                            type="index"
                            label="排名"
                            width="100">

                        </el-table-column>
                        <el-table-column
                            prop="gatePosition"
                            label="机位号">
                        </el-table-column>
                        <el-table-column
                            prop="useRatio"
                            label="利用率">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </el-row>

        </el-col>
    </el-row>
</div>